<template>
  <div class="zj-classify">
    <div class="classify-left">
      <van-sidebar v-model="active">
        <van-sidebar-item disabled title="分类选择"/>
        <template v-for="(item, index) in goodsModule.classificationList" :key="item.id">
          <van-sidebar-item @click="handleClassifyChange(item.id, index)" :title="item.name"/>
        </template>
      </van-sidebar>
    </div>
    <div class="classify-right">
      <van-list
          class="right-list"
          ref="originScrollRef"
          v-model:loading="isLoading"
          :finished="isFinish"
          finished-text="没有更多了"
          :immediate-check="false"
          :offset="50"
          @load="loadNext"
      >
        <div
            class="list-item"
            v-for="item in goodsModule.goodsList"
            :key="item.id"
            @click="handleGoodsItemClick(item.id)"
        >
          <div class="item-left">
            <img v-lazy="item.subImages" @error="$event.target.src=defaultImage" alt="">
          </div>
          <div class="item-right">
            <p class="name">{{ item.name }}</p>
            <p class="tip">{{ item.subtitle }}</p>
            <p class="price">
              优惠价
              <span style="color: #C81C22">￥{{ item.price }}</span>
            </p>
          </div>
        </div>
      </van-list>
    </div>
  </div>
</template>

<script setup lang="ts">
import {onActivated, ref} from "vue";
import useGoodsModule from "@/store/goodsModule";
import defaultImage from "@/assets/images/default_avatar.jpg"
import {useRouter} from "vue-router";
import {Toast} from "vant";

const active = ref(1)
const router = useRouter()
const originScrollRef = ref()
const currentChosenClassifyId = ref(0)
const goodsModule = useGoodsModule()
// const scrollViewRef = ref<InstanceType<typeof ZJScrollView>>()
const handleClassifyChange = async (classifyId: number, index: number) => {
  if (index !== active.value - 1) {
    const toast = Toast.loading("加载中...")
    // 防止滚动太下面导致的多次请求
    originScrollRef.value?.$el?.scrollTo({
      top: 0
    })
    isFinish.value = false
    form.value.pageSize = 6
    form.value.pageNum = 1
    currentChosenClassifyId.value = classifyId
    await goodsModule.setGoodsClassifyAction({
      classifyId,
      ...form.value
    })
    toast.clear()
  }
}

const isLoading = ref(false)
const isFinish = ref(false)
const pageTotal = ref(0)
const form = ref({
  pageSize: 6,
  pageNum: 1,
  searchCtt: ""
})

// 商品点击
const handleGoodsItemClick = (goodsId: number) => {
  router.push("/goods/detail/" + goodsId)
}

// 获取数据
const getNewData = async () => {
  const toast = Toast.loading("加载中...")
  await goodsModule.setGoodsClassifyAction({
    classifyId: currentChosenClassifyId.value,
    isMoreMode: true,
    ...form.value
  })
  pageTotal.value = goodsModule.goodsListPageInfo.pageTotal
  if (goodsModule.goodsList.length >= pageTotal.value) {
    isFinish.value = true
  }
  toast.clear()
}
const loadNext = async () => {
  isLoading.value = true
  form.value.pageNum += 1
  await getNewData()
  isLoading.value = false
}
onActivated(async () => {
  const toast = Toast.loading("加载中...")
  await goodsModule.setClassificationAction()
  if (goodsModule.classificationList[0].id) {
    currentChosenClassifyId.value = goodsModule.classificationList[0].id
  }
  await getNewData()
  active.value = 1
  toast.clear()
})
</script>

<style scoped lang="less">
@import "src/assets/css/variable";
@import "src/assets/css/mixins";

.zj-classify {
  height: 100%;
  display: flex;

  .classify-left {
    height: 100%;
    width: fit-content;
    border-right: 1px solid #f2f2f2;
  }

  .classify-right {
    flex: 1;
    background-color: #fff;
    padding: 10px;
    box-sizing: border-box;
    height: 100%;

    .right-list {
      height: 100%;
      overflow: auto;
      // Google
      &::-webkit-scrollbar {
        width: 0 !important
      }

      .list-item {
        background-color: @theme-grey-color;
        display: flex;
        align-items: center;
        padding: 20px;
        border-radius: 6px;
        margin-bottom: 10px;
        box-sizing: border-box;

        .item-left {
          width: 80px;
          height: 80px;
          margin-right: 8px;
          flex-shrink: 0;

          img {
            width: 100%;
            height: 100%;
            border-radius: 10px;
            background-size: cover;
          }
        }

        .item-right {
          .name {
            font-size: 15px;
            margin-bottom: 8px;
            .clamp(2);
            word-break: break-all;
          }

          .tip {
            font-size: 14px;
            color: #999;
            margin-bottom: 4px;
            .clamp(2);
          }

          .price {
            font-size: 14px;
            color: #C81C22;
            font-weight: 600;
          }
        }
      }
    }
  }
}
</style>
